<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>第三次作业</title>
		<link rel="stylesheet" href="./Bootstrap4.6.1/css/bootstrap.css">
		<script src="./Bootstrap4.6.1/js/jquery.js"></script>
		<script src="Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
		<style>
			/* div{
				outline: 1px red solid;
			} */
			
			/* 顶部样式 */
			.top h1{
				font-weight: bold;
				text-align: center;
			}
			/* 顶部导航 */
			.top .top-nav{
				/* 弹性盒子 */
				display: flex;
				/* 水平分散对齐 */
				justify-content: space-around;
				background-color: black;
				padding: 0 6rem;
			}
			.top .top-nav > div{
				background-color: #fff;
				padding:0.5rem 1rem;
				border-radius: 5px;
				margin: 1rem auto;
			}
			/* 顶部菜单按钮 */
			.top .top-memu-img{
				/* 隐藏按钮 */
				display: none;
			}
			
			/* 顶部中屏  范围：768-577*/
			@media screen and (max-width:992px) and (min-width:769px) {
				.top .top-nav{
					padding: 0;
					background-color: red;
				}
			}
			/* 顶部小屏 */
			@media screen and (max-width:768px) {
				.top .top-memu-img{
					/* 显示按钮 */
					display: block;
				}
				.top .top-nav{
					/* 隐藏弹性盒子 */
					display: none;
				}
				.top:hover .top-nav{
					/* 显示盒子 */
					display: flex;
					/* 自动换行 */
					flex-wrap: wrap;
					padding: 0;
				}
				.top:hover .top-nav > div{
					/* 自动缩放 */
					flex: 1;
					/* 初始宽度 */
					flex-basis: 90%;
					margin: 0.5rem;
					text-align: center;
				}
				
			}
			
			/* 中间区域 */
			.main-row-01 > div{
				text-align: center;
			}
			.main-row-01 .title01{
				font-weight: bold;
			}
			.main-row-02 > div{
				background-color: black;
				color: #fff;
				margin: 1rem 1rem;
				border-radius: 5px;
				text-align: center;
			}
			.main-row-03 .title01{
				text-align: center;
				font-size: 2rem;
				margin: 3rem 0;
				font-weight: bold;
			}
			.main-row-03 >div{
				margin: 0.5rem 0.5rem;
				text-align: center;
			}
			.main-row-03 >div img{
				width: 100%;
			}
			
			/* 选择第三行里面子元素的第2个元素 */
			.main-row-03 > div > :nth-child(2){
				/* 标题加粗 */
				font-weight: bold;
			}
			.main-row-03 > div > :nth-child(4){
				margin-top: 0.5rem;
				margin-bottom: 1rem;
			}
		</style>
	</head>
	<body>
		<!-- 顶部区域 -->
		<div class="container-fluid p-0 top top2">
			<h1 class="m-3">AdMaster</h1>
			<img class="top-memu-img" src="./img/1.png" alt="">
			<div class="top-nav">
				<div>Home</div>
				<div>solution</div>
				<div>Market Lnsights</div>
				<div>College</div>
				<div>About Us</div>
			</div>
		</div>
		<!-- 广告图 -->
		
		<div class="container main">
			<div class="main-img my-3"><img class="w-100" src="./img/pic01.jpg" alt="" srcset=""></div>
			<div class="row justify-content-between main-row-01">
				<div class="col-12  col-md-3">
					<img src="./img/2.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
				<div class="col-12  col-md-3">
					<img src="./img/2.jpg" alt="">
					<div class="title01">Magna etiam dolor</div>
					<div>Provides Servers and network connectivity.s</div>
				</div>
				<div class="col-12  col-md-3">
					<img src="./img/2.jpg" alt="">
					<div class="title01">Ipsum consequat</div>
					<div>Nisl amet dolor sit ipsum veroeros sed blandit consequat veroeros et magna tempus.</div>
				</div>
			</div>
			<div class="row justify-content-center main-row-02">
				<div class="col-12  col-md-4">Get Started</div>
				<div class="col-12  col-md-4">Learn More</div>
			</div>
			<div class="row justify-content-between main-row-03 ">
				<div class="title01 col-12">My Portfolio</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<button class="btn btn-dark">Find out more</button>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<button class="btn btn-dark">Find out more</button>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<button class="btn btn-dark">Find out more</button>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<button class="btn btn-dark">Find out more</button>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<button class="btn btn-dark">Find out more</button>
				</div>
				<div class="col-12 col-lg-3 col-md-5">
					<img src="./img/pic02.jpg" alt="">
					<div>Ipsum feugiat et dolor</div>
					<div>Lorem ipsum dolor sit amet sit veroeros sed amet blandit consequat veroeros lorem blandit adipiscing et feugiat phasellus tempus dolore ipsum lorem dolore.</div>
					<button class="btn btn-dark">Find out more</button>
				</div>
				
			</div>
		</div>
		<div class="container-fluid">
			底部
		</div>
		
	</body>
</html>